<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="景点列表" navbarType='3' zIndex="10079"></wlk-navbar>
        <view class="line-content">
             <view class="head-box">
               <view class="relative">
                 <u-search placeholder="搜索景点名称" disabled v-model="keyword" :showAction="false" @click="jump(keyword)"  :searchIconColor="themeColor" margin="0 0 30rpx 0" ></u-search>
                 <view class="search-jump" @click="jump(keyword)"></view>
               </view>
               <view class="wlkflex">
                 <view class="wlkflex justify-center tab-item relative" @click="changeBarType('end')">
                   <view class="mr05" :style="barType=='end'?'color:'+themeColor:''">{{$u.test.isEmpty(endData)?'目的地': endData.name}}</view>
                   <u-icon v-if="barType=='end'" name="arrow-down" :color="themeColor" size="12"></u-icon>
                   <u-icon v-else name="arrow-right" color="#999999" size="12"></u-icon>

                 </view>
                 <view class="wlkflex justify-center tab-item relative" @click="changeBarType('sort')">
                   <view class="mr05" :style="barType=='sort'?'color:'+themeColor:''">{{sortRadio[sortValue].name}}</view>
                   <u-icon v-if="barType=='sort'" name="arrow-down" :color="themeColor" size="12"></u-icon>
                   <u-icon v-else name="arrow-right" color="#999999" size="12"></u-icon>
                 </view>
                 <view class="wlkflex justify-center tab-item relative" @click="changeBarType('filter')">
                   <view class="mr05" :style="barType=='filter'?'color:'+themeColor:''">筛选</view>
                   <u-icon v-if="barType=='filter'" name="arrow-down" :color="themeColor" size="12"></u-icon>
                   <u-icon v-else name="arrow-right" color="#999999" size="12"></u-icon>
                 </view>
               </view>

              </view>
            <block v-if="loadStatus=='nomore' && ticketList.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
              <u-gap height="90" bgColor="#FFFFFF"></u-gap>
              <wlk-ticket-list @doneWaterFall="doneTicketWaterFall" :list="ticketList" :pageReset="pageReset"></wlk-ticket-list>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>

        </view>
    <u-popup :show="show" @close="closePopup" mode="top">
      <view class="popup relative pd030">
        <view class="top-head"></view>
        <scroll-view scroll-y="true" class="scroll-Y relative">
          <u-gap :height=" barType=='end' ? '55':'15'" bgColor="#FFFFFF"></u-gap>
          <block v-if="barType == 'end'">
            <view class="chose-end pd20 wlkflex wrap">
              <view class="chose-item" @click="reset()">目的地</view>
              <u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
              <block v-for="(chose,choseIndex) in endNames" :key="choseIndex">
                <view @click="initTabEnd(chose,choseIndex)" class="chose-item" :style="{backgroundColor:themeColor,color:'#FFFFFF'}">{{chose.name}}</view>
                <u-icon v-if="choseIndex!= endNames.length-1" name="arrow-right" color="#999999" size="28rpx"></u-icon>
              </block>
            </view>
            <block v-if="!$u.test.isEmpty(choseEndList)">
              <u-cell-group :border="false">
                <u-cell  :titleStyle="{'fontSize': '28rpx'}" :title="end.name" :rightIcon="$u.test.isEmpty(end.children)?'checkbox-mark':'arrow-right'" :rightIconStyle="{'fontSize': '28rpx',color:endData == end?themeColor:'#FFFFFF'}" isLink v-for="(end,endIndex) in choseEndList.children" @click="choseEnd(end,end.name)"></u-cell>
              </u-cell-group>
            </block>
            <block v-else>
              <u-cell-group :border="false">
                <u-cell  :titleStyle="{'fontSize': '28rpx'}" title="全部" isLink rightIcon="checkbox-mark" :rightIconStyle="{'color': themeColor}"></u-cell>
                <u-cell  :titleStyle="{'fontSize': '28rpx'}" :title="end.name" :rightIcon="$u.test.isEmpty(end.children)?'checkbox-mark':'arrow-right'" :rightIconStyle="{'fontSize': '28rpx'}" isLink v-for="(end,endIndex) in endList" :key="endIndex" @click="choseEnd(end,end.name)"></u-cell>
              </u-cell-group>
            </block>
          </block>
          <block v-if="barType == 'sort'">
            <view class="radio-item">
              <u-radio-group
                  v-model="sortRadio[sortValue].name"
                  placement="column"
                  iconPlacement="right"
                  :iconColor="themeColor"
                  inactiveColor="#FFFFFF"
                  activeColor="#FFFFFF"
                  iconSize="18"

              >
                <u-radio
                    :customStyle="{marginBottom: '20px'}"
                    v-for="(item, index) in sortRadio"
                    :key="index"
                    labelSize="14"
                    :label="item.name"
                    :name="item.name"
                    labelColor="#303133"
                    @change="changeSort"
                >
                </u-radio>
              </u-radio-group>
            </view>
          </block>
          <block v-if="barType == 'filter'">
            <view v-for="(item, index) in filterList" :key="index">
              <block v-if="index == 'cateList'">
                <view class="filter-title bold">分类</view>
                <view class="wlkflex wrap">
                  <view class="filter-item center mr20 mt20" @click="filterClick('cateIndex',-1)" :style="filterIndex.cateIndex==-1 ?{backgroundColor:themeColor,color:'#FFFFFF'}:''">不限</view>
                  <view class="filter-item center mr20 mt20" @click="filterClick('cateIndex',cateIndex)" :style="filterIndex.cateIndex==cateIndex ?{backgroundColor:themeColor,color:'#FFFFFF'}:''" v-for="(cate, cateIndex) in item" :key="cateIndex">{{cate.name}}</view>
                </view>
              </block>
              <block v-if="index == 'levelList'">
                <view class="filter-title bold mt30">等级</view>
                <view class="wlkflex wrap">
                  <view class="filter-item center mr20 mt20" @click="filterClick('levelIndex',-1)" :style="filterIndex.levelIndex==-1 ?{backgroundColor:themeColor,color:'#FFFFFF'}:''">不限</view>
                  <view class="filter-item center mr20 mt20" @click="filterClick('levelIndex',levelIndex)" :style="filterIndex.levelIndex==levelIndex ?{backgroundColor:themeColor,color:'#FFFFFF'}:''" v-for="(level, levelIndex) in item" :key="levelIndex">{{level.name}}</view>
                </view>
              </block>
              <block v-if="index == 'tagList'">
                <view class="filter-title bold mt30">标签</view>
                <view class="wlkflex wrap">
                  <view class="filter-item center mr20 mt20" @click="filterClick('tagIndex',-1)" :style="filterIndex.tagIndex==-1 ?{backgroundColor:themeColor,color:'#FFFFFF'}:''">不限</view>
                  <view class="filter-item center mr20 mt20" @click="filterClick('tagIndex',tagIndex)" :style="filterIndex.tagIndex==tagIndex ?{backgroundColor:themeColor,color:'#FFFFFF'}:''"  v-for="(tag, tagIndex) in item" :key="tagIndex">{{tag}}</view>
                </view>
              </block>
            </view>
          </block>
          <u-gap :height=" barType=='filter' || barType=='end' ? '100':'0'" bgColor="transparent"></u-gap>
        </scroll-view>
        <view class="flex-btn wlkflex justify-between"  v-if="barType=='filter' || barType=='end' ">
          <view class="cancel-btn left center" @click="reset(barType)">重置</view>
          <view :style="{backgroundColor:themeColor}" @click="init" class="comfirm-btn right-btn center">确认</view>
        </view>
      </view>
    </u-popup>
    </view>
</template>

<script>
    var _self;
    import { toUrl } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty']),
        },
		data() {
			return {
        barType:'',
        show:false,
        offset:[-5,2],
        endData: {},
        endTempData: {},
        endNames:[],
        //横向两端排列形式数据
        sortRadio: [
          {
            name: '综合排序',
            disabled: false
          },
          {
            name: '价格从低到高',
            disabled: false
          },
          {
            name: '价格从高到低',
            disabled: false
          },
          {
            name: '销量优先',
            disabled: false
          },
          {
            name:'人气推荐',
            disabled: false
          }
        ],
        sortValue: 0,
        filterList:[],
        endList:[],
        choseEndList:[],
        filterIndex:{
          cateIndex:-1,
          levelIndex:-1,
          tagIndex:-1,
        },
        keyword:'',
        ids:null,
        ticketList:[],
        page: 1,
        loadStatus:'loading',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '实在没有了',
        pageReset:false,
        endCityId:''
			};
		},
		onLoad(options) {
		    _self = this;
        if(options.sortValueIndex && _self.sortRadio[options.sortValueIndex]){
          _self.sortValue = options.sortValueIndex;
        }
      if(options.keyword){
        _self.keyword = options.keyword
      }
      this.ids = this.$Route.query.ids??null;
      if(options.endCityId){
        _self.endCityId = options.endCityId;
      }
            this.loadStatus = 'loading';
            this.page = 1;
            this.ticketList = [];
            this.getTabData();
            this.getData();

        },
		onShow() {

		},
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
		methods: {
      initTabEnd(v,k){
        _self.endData = v;
        //删除_self.endNames数组中除当前选择项后面的元素
        _self.endNames = _self.endNames.slice(0,k+1);
        _self.choseEndList = v;
      },
      choseEnd(end,cellName){
        if(!uni.$u.test.isEmpty(end.children)){
          _self.choseEndList = end;
          _self.endTempData = end;
          _self.endNames.push(end);
        }else{
          if(_self.endTempData!= end){
            _self.endTempData = end;
          }
        }
      },
      changeSort(name){
        let index = _self.sortRadio.findIndex(item => item.name === name);
        if(index!=-1){
          _self.sortValue = index;
          this.init();
        }

      },
      init(){
        if(this.barType=='end'){
          this.endData = this.endTempData;
        }
        this.show = false;
        this.barType = '';
        this.loadStatus = 'loading';
        this.page = 1;
        this.ticketList = [];
        this.getData();
      },
      reset(){
        if(this.barType=='filter'){
          this.filterIndex = {
            cateIndex:-1,
            levelIndex:-1,
            tagIndex:-1,
          };
        }else if(this.barType=='end'){
          this.endData = {};
          this.endNames = [];
          this.choseEndList = [];
        }
      },
      filterClick(key,value){
        this.filterIndex[key] = value;
      },
      closePopup(){
        this.barType = '';
        this.show = false;
      },
      changeBarType(type){
        if(this.barType == type){
          this.closePopup()
        }else{
          this.barType = type;
          this.show = true;
        }
      },
      getTabData(){
        uni.$u.http.post('ticket/getTabData', {
          endCityId:_self.endCityId
        }).then(res => {
          _self.filterList = res.data.filterList;
          _self.endList = res.data.endList;
          _self.endNames = res.data.endNames;
          _self.choseEndList = res.data.choseEndList;
          _self.endData = res.data.endData;
        }).catch(res => {
        })
      },
      async getData() {
        let filterIds = new Object();
        filterIds.cateId = _self.filterIndex.cateIndex==-1?-1:_self.filterList.cateList[_self.filterIndex.cateIndex].id;
        filterIds.levelId = _self.filterIndex.levelIndex==-1?-1:_self.filterList.levelList[_self.filterIndex.levelIndex].id;
        filterIds.tagName = _self.filterIndex.tagIndex==-1?-1:_self.filterList.tagList[_self.filterIndex.tagIndex];
        let json = {
          endId:this.endData.id,
          sortValue:this.sortValue,
          filterIds:filterIds,
          keyword: this.keyword,
          ids: this.ids,
          page: this.page,
        }
        const res = await uni.$u.http.post("ticket/getTicketList", json);
        if (res && res.data && res.data.rows) {
            this.ticketList = this.ticketList.concat(res.data.rows);
        }
        this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
        //瀑布流参数
        if(this.page == 1){
          this.pageReset = true;
        }
      },
      jump(index){
          toUrl('/pages/ticket/search?keyword='+index);
      },
      doneTicketWaterFall(){
        this.pageReset = false;
      }
		},
	};
</script>

<style lang="scss">
.search-jump{
  position: absolute;
  z-index: 99;
  width: 100%;
  top: 0;
  height: 66rpx;
  border-radius: 40rpx;
}
    .line-content {
        .head-box{
            background-color: #FFFFFF;
            padding: 30rpx 30rpx 20rpx 30rpx;
            position: fixed;
           z-index:10079;
          width:100%;
            .tab-item{
                width: 33.33%;
                font-size: $font-base;
                .order{
                    height: 25rpx;
                    width: 24rpx;
                }
            }
        }
    }
    .popup{
      /*min-height: 900rpx;*/
      .top-head{
        height: 270rpx;
      }
      .flex-btn{
        position: absolute;
        bottom: 0;
        width: 92%;
        padding:30rpx 0;
        .cancel-btn{
          padding: 25rpx 0;
          font-size: $font-lt;
          width: 30%;
          border-radius: 50rpx;
        }
        .comfirm-btn{
          padding: 25rpx 0;
          font-size: $font-lt;
          width: 60%;
          border-radius: 50rpx;
        }
        .left{
          background-color: #f3f8fe;
          color: $uni-text-color;
        }
        .right-btn{
          color: white;
        }
      }
      .scroll-Y{
        min-height: 200rpx;
        max-height: 1000rpx;
        border-top: 1px solid #f3f3f3;
        .chose-end{
          background-color: #f3f8fe;
          font-size: $font-base;
          position: fixed;
          z-index: 10079;
          width: 92%;
          top: 270rpx;
          left: 4.2%;
        }
        .chose-item{
          background-color: #e3e3e3;
          color: $font-color-dark;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
        }
        .filter-title{
          font-size: $font-lt;
        }
        .filter-item{
          font-size: $font-base;
          background-color: #f3f8fe;
          padding: 10rpx 0;
          min-width: 150rpx;
          color: $font-color-dark;
          border-radius: 30rpx;
        }
      }
      .list{
        .item{
          border: 1px solid #dddcdd;
          padding: 15rpx 25rpx;
          color: #666;
        }
      }
    }
</style>
